<template>
  <div id="box">
    <div class="card">
      <div class="card-header">
        <div class="news">
          <i class="icon font_family icon-xinwen_o"></i>
          <span>新闻资讯</span>
        </div>
        <div class="point">
          <i class="icon font_family icon-sandian"></i>
        </div>
      </div>
      <!------- end of card-header --------->
      <div class="card-body">
        <div class="nav">
          <div class="item" :class="{'on' : '/hot' === this.$route.path}" @click="toPage('/hot')">热门</div>
          <div class="item" :class="{'on' : '/news' === this.$route.path}" @click="toPage('/news')">新闻</div>
          <div class="item" :class="{'on' : '/notice' === this.$route.path}" @click="toPage('/notice')">公告</div>
          <div class="item" :class="{'on' : '/exercise' === this.$route.path}" @click="toPage('/exercise')">活动</div>
          <div class="item" :class="{'on' : '/match' === this.$route.path}" @click="toPage('/match')">赛事</div>
        </div>
        <div class="swiper-box">
          <swiper>
            <swiper-slide>
              <div class="hot-content">
                <span class="item">[新闻] | 夏日新版本“星之队”即将 6 月上线 <span class="date">06/02</span></span>
                <span class="item">[新闻] | 夏日新版本“星之队”即将 6 月上线 <span class="date">06/02</span></span>
                <span class="item">[新闻] | 夏日新版本“星之队”即将 6 月上线 <span class="date">06/02</span></span>
                <span class="item">[新闻] | 夏日新版本“星之队”即将 6 月上线 <span class="date">06/02</span></span>
                <span class="item">[新闻] | 夏日新版本“星之队”即将 6 月上线 <span class="date">06/02</span></span>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="hot-content">
                <span class="item">[新闻] | 夏日新版本“星之队”即将 6 月上线 <span class="date">06/02</span></span>
                <span class="item">[新闻] | 夏日新版本“星之队”即将 6 月上线 <span class="date">06/02</span></span>
                <span class="item">[新闻] | 夏日新版本“星之队”即将 6 月上线 <span class="date">06/02</span></span>
                <span class="item">[新闻] | 夏日新版本“星之队”即将 6 月上线 <span class="date">06/02</span></span>
                <span class="item">[新闻] | 夏日新版本“星之队”即将 6 月上线 <span class="date">06/02</span></span>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="hot-content">
                <span class="item">[新闻] | 夏日新版本“星之队”即将 6 月上线 <span class="date">06/02</span></span>
                <span class="item">[新闻] | 夏日新版本“星之队”即将 6 月上线 <span class="date">06/02</span></span>
                <span class="item">[新闻] | 夏日新版本“星之队”即将 6 月上线 <span class="date">06/02</span></span>
                <span class="item">[新闻] | 夏日新版本“星之队”即将 6 月上线 <span class="date">06/02</span></span>
                <span class="item">[新闻] | 夏日新版本“星之队”即将 6 月上线 <span class="date">06/02</span></span>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'News',
    data() {
      return {
        
      }
    },
    methods: {
      toPage(path) {
        this.$router.push(path);
      }
    }
  }
</script>

<style lang="scss" scoped>
  // --------- card --------
  .card {
    margin: 10px 0;
    padding: 10px;
    background-color: #fff;
    .card-header {
      height: 40px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #999;
      .news {
        display: flex;
        flex: 1;
        align-items: center;
        .icon-xinwen_o {
          margin-right: 2px;
        }
        span {
          font-size: 18px;
        }
      }
    }
    // card-body
    .card-body {
      .nav {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
        .item {
          font-size: 16px;
          color: #999;
        }
      }
      .hot-content {
        display: flex;
        flex-direction: column;
        .item {
          font-size: 16px;
          line-height: 2rem;
          .date {
            float: right;
          }
        }
      }
    }
  }
  .on {
    color: #409eff;
    border-bottom: 2px solid #409eff;
  }
</style>